<template>
	<view class="">
		<view class="container" :style="'background:' + 'url(' + $util.img('upload/uniapp/dailishang.png') + ') no-repeat 0 0/100%'"
		 v-if="show == null">
			<view class="apply">
				<view class="p-t-s">
					<view class="p-title">
						申请规则
					</view>
					<view class="p-two">
						成为代理商可以邀请团长组建自己的团队，通
						过团队的力量获取更多收益。
					</view>
					<button type="default" @click="apply">立即申请
					</button>
					<view class="p-footer">
						点击注册即代表您已同意<text class="text-font-red">《申请协议》</text>
					</view>
				</view>
			</view>
		</view>
		<view class="containers" v-else>
			<view class="audit">

				<view class="header">
					<view class="jindu">
						<view class="">

							<image :src="$util.img('upload/uniapp/register/audit1.png')" mode="widthFix" />
						</view>
						<view class="next"></view>
						<view class="">
							<image :src="$util.img('upload/uniapp/register/audit1.png')" mode="widthFix" />
						</view>
						<view v-if="flag == 0 || flag == 2" class="next next-color"></view>
						<view v-else class="next "></view>
						<view class="">
							<image v-if="flag == 0 || flag == 2" :src="$util.img('upload/uniapp/register/audit5.png')" mode="widthFix" />
							<image v-else :src="$util.img('upload/uniapp/register/audit1.png')" mode="widthFix" />
						</view>
					</view>
					<view class="header-text">
						<view>申请代理商
						</view>
						<view>正在审核
						</view>
						<view v-if="flag == 0 || flag == 2" class="small">
							审核结果
						</view>
						<view v-else>
							审核结果
						</view>
					</view>
				</view>

				<view class="body">
					<image v-if="flag == 0" :src="$util.img('upload/uniapp/register/audit3.png')" mode="widthFix" />
					<image v-else-if="flag == 4" :src="$util.img('upload/uniapp/register/audit2.png')" mode="widthFix" />
					<image v-else :src="$util.img('upload/uniapp/register/audit4.png')" mode="widthFix" />
					<text v-if="flag == 0" class="big-text">
						等待上级审核
					</text>
					<text v-if="flag == 1" class="big-text">
						上级审核拒绝
					</text>
					<text v-if="flag == 2" class="big-text">
						等待平台审核
					</text>
					<text v-if="flag == 3" class="big-text">
						平台审核拒绝
					</text>
					<text v-if="flag == 4" class="big-text">
						审核通过
					</text>
					<text v-if="flag == 5" class="big-text">
						平台要求整改
					</text>
					<text v-if="flag == 0" class="small">你的申请正在审核中，请耐心等待~</text>
					<text v-if="flag == 4" class="small">你的申请已审核通过，快开始你的商城之旅吧~</text>
					<text v-if="flag == 1 || flag == 3 " class="small">
						很抱歉你的申请没有通过~</text>
					<text v-if="flag == 1 || flag == 3 || flag == 5" class="small">拒绝理由:{{reason}}</text>
					<text class="small" v-if="flag == 3 || flag == 1 && Date.parse(new Date()) / 1000 < reapply_submit_check">请于{{ $util.timeStampTurnTime(reapply_submit_check) }}后再次申请</text>

				</view>

				<view class="footer">
					<button class="footer-button" @click="reapply()" v-if="flag == 3 || flag == 5 || flag == 1">重新申请</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				pintuan_trader_level: '',
				pintuan_trader_level_name: '',
				show: null,
				flag: 0,
				superior: 0,
				superior_pintuan_trader_level: '',
				reason: '',
				day: 0,
			}
		},
		onShow() {
			this.getMemberInfo()
			this.get_agent_apply_detail()
		},
		computed: {
			reapply_submit_check() {
				return this.admin_check_time + 24 * 60 * 60 * this.day;
			}
		},
		methods: {
			// 获取当前代理商信息
			async getMemberInfo() {
				let res = await this.$api.sendRequest({
					url: '/platformpintuan/api/Pintuantrader/detail',
					async: false
				});
				let data = res.data
				if (res.code >= 0 && res.data) {
					this.superior = res.data.superior;
					this.superior_pintuan_trader_level =
						res.data.superior_pintuan_trader_level;
				}
			},
			get_agent_apply_detail() {
				this.$api.sendRequest({
					url: '/platformpintuan/api/Pintuantrader/agentApplyDetail',
					data: {},
					success: res => {
						this.show = res.data.apply_info;
						this.flag = res.data.apply_info.check_status;
						//上级拒绝
						if (this.flag == 1) {
							this.reason =
								res.data.apply_info.superior_reject_reason;
							this.admin_check_time =
								res.data.apply_info.superior_check_time;
							this.day =
								res.data.config_info.superior_reject_agent_day;
						} else { //平台拒绝或整改
							this.reason = res.data.apply_info.admin_reject_reason;
							if (this.flag == 3) { //平台拒绝不显示时间
								this.admin_check_time =
									res.data.apply_info.admin_check_time;
								this.day =
									res.data.config_info.admin_reject_agent_day;
							}
						}
					}
				})
			},
			apply() {
				if (this.superior > 0 &&
					(this.superior_pintuan_trader_level == 'city' || this.superior_pintuan_trader_level ==
						'district')) {
					this.$api.sendRequest({
						url: '/platformpintuan/api/Pintuantrader/agentApply',
						data: {},
						success: res => {
							if (res.code == 0) {
								this.$util.showToast({
									title: `申请成功`,
									icon: 'success',
								});

								this.get_agent_apply_detail()
							} else {
								this.$util.showToast({
									title: res.message
								});
							}
						}
					});
				} else {
					this.$util.showToast({
						title: '你当前等级不能申请'
					});
				}
			},
			reapply() {
				this.apply();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.containers {
		background-color: #fff;

		.audit {
			height: 1054rpx;

			.header {
				padding-top: 68rpx;

				.jindu {
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 0rpx 92rpx;

					image {
						width: 23rpx;
						height: 23rpx;
					}

					.next-color {
						background-color: #AAACB1;
					}
				}

				.next {
					width: 165rpx;
					height: 1rpx;
					background-color: #FD7271;

				}

				.header-text {
					display: flex;
					justify-content: space-around;
					align-items: center;

					.small {
						color: #909399;
					}
				}
			}

			.body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 162rpx;

				image {
					width: 222rpx;
					height: 221rpx;
				}

				.big-text {
					font-size: 34rpx;
				}

				.small {
					font-size: 24rpx;
					color: #909399;
					line-height: 48rpx;
				}
			}

			.footer {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #838383;

				.footer-button {
					width: 624rpx;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 30rpx;
					background: #FF4544;
					margin: 60rpx 0;
					color: #FFFFFF;
				}
			}

		}
	}

	.container {
		background-color: #9195F9 !important;

		.apply {
			width: 100vw;
			/* #ifdef H5  */
			height: calc(100vh - 88rpx) !important;
			/* #endif	  */


			/* #ifdef APP-PLUS  */
			height: 100vh !important;
			/* #endif	  */

			background-size: cover;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex-direction: column;

			.p-t-s {
				width: 695rpx;
				height: 452rpx;
				background: #FFFFFF;
				border: 0rpx solid #2B2F30;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				margin-bottom: 7%;
				padding: 0 37rpx;

				.p-title {
					font-size: 30rpx;
					font-weight: 500;

					button {
						width: 624rpx;
						height: 90rpx;
					}
				}

				.p-two {
					margin: 40rpx 20rpx 30rpx 20rpx;
				}

				button {
					width: 100%;
					background: #FF4544;
					color: #FFFFFF;
					height: 90rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.p-footer {
					font-size: 24rpx;
					padding-top: 33rpx;
					color: #999999;

					.text-font-red {
						color: #FF4544;
					}
				}

			}

		}

		.apply {
			width: 100vw;
			/* #ifdef H5  */
			height: calc(100vh - 88rpx) !important;
			// background-image: url(../../../static/pingtuanshang.png);
			/* #endif	  */


			/* #ifdef APP-PLUS  */
			height: calc(100vh + 44rpx) !important;

			/* #endif	  */
			// background-image: url(../../../static/pingtuanshang.png);
			background-size: cover;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			flex-direction: column;

			image {
				height: 100vh;
				position: relative;
			}



			.p-t-s {
				position: absolute;
				z-index: 999;
				bottom: 20rpx;
				width: 695rpx;
				height: 452rpx;
				background: #FFFFFF;
				border: 0rpx solid #2B2F30;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 0 37rpx;

				.p-title {
					font-size: 30rpx;
					font-weight: 500;

					button {
						width: 624rpx;
						height: 90rpx;
					}
				}

				.p-two {
					margin: 40rpx 20rpx 30rpx 20rpx;
				}

				button {
					width: 100%;
					background: #FF4544;
					color: #FFFFFF;
					height: 90rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.p-footer {
					font-size: 24rpx;
					padding-top: 33rpx;
					color: #999999;

					.text-font-red {
						color: #FF4544;
					}
				}

			}


		}


		.audit {


			.header {
				padding-top: 68rpx;

				.jindu {
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding: 0rpx 92rpx;

					image {
						width: 23rpx;
						height: 23rpx;
					}

					.next-color {
						background-color: #AAACB1;
					}
				}

				.next {
					width: 165rpx;
					height: 1rpx;
					background-color: #FD7271;

				}

				.header-text {
					display: flex;
					justify-content: space-around;
					align-items: center;

					.small {
						color: #909399;
					}
				}
			}

			.body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-top: 162rpx;

				image {
					width: 222rpx;
					height: 221rpx;
				}

				.big-text {
					font-size: 34rpx;
				}

				.small {
					font-size: 24rpx;
					color: #909399;
					line-height: 48rpx;
				}
			}

			.footer {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #838383;

				.footer-button {
					width: 624rpx;
					height: 90rpx;
					line-height: 90rpx;
					font-size: 30rpx;
					background: #FF4544;
					margin: 60rpx 0;
					color: #FFFFFF;
				}
			}

		}
	}
</style>
